<template>
<div>
  <!--头部-->
  <div style="display: flex; height:60px;line-height: 60px;border-bottom: 1px solid #ccc">
    <div style="width: 300px;display: flex; padding-left:30px">
      <div style="font-size: 20px ;flex: 1 ;font-weight:bold" >欢迎来到SEU线上书店</div>
    </div>
    <div style="flex: 1">
      <!--导航菜单-->
      <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" router=true>
        <el-menu-item index="/front/home">主页</el-menu-item>
        <el-menu-item index="/front/cart" >我的购物车</el-menu-item>
        <el-menu-item index="/front/about" >用户帮助</el-menu-item>
      </el-menu>
    </div>
    <div style="width: 350px" >
      <el-select v-model="value" placeholder="请选择" style="width: 100px" >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-input
          placeholder="请输入查找内容并回车"
          prefix-icon="el-icon-search"
          style="width: 200px;margin-left: 10px"
          v-model=info
          @keyup.enter.native="search(info)">
      </el-input>
    </div>
    <div style="width: 200px;display: flex; padding-left:30px">
      <!--      用户信息下拉菜单-->
      <el-button type="text" v-if="!$store.state.user.isLogin" @click="login">登录</el-button>
      <el-button type="text" v-if="!$store.state.user.isLogin" @click="register">注册</el-button>
      <el-button type="text" v-if="$store.state.user.isLogin" @click="exit">你好，{{this.$store.state.user.username}}</el-button>
      <el-button type="text" v-if="$store.state.user.isLogin" @click="mofify" >修改密码</el-button>
    </div>
  </div>

  <router-view/>
</div>

</template>

<script>
export default {
  name: "Front",
  data(){
    return{
      info:'',
      options: [{
        value: '1',
        label: '作者'
      }, {
        value: '2',
        label: '书名'
      }, {
        value: '3',
        label: 'ISBN'
      }],
      value: ''
    }
  },

  methods:{
    search(info){
      if(this.value =='2'){
        this.$axios.get('http://localhost:9090/book/findbybname?bname='+info,
        ).then(
                res=>{
                  if(res.data.code=="200"){
                    this.$store.commit("updateProps",res.data.data)
                  }
                }
        )
      }
      if(this.value =='3'){
        this.$axios.get('http://localhost:9090/book/findbyISBN?ISBN='+info,
            ).then(
            res=>{
              if(res.data.code=="200"){
                this.$store.commit("updateProps",res.data.data)
              }
            }
        )
      }
      if(this.value =='1'){
        this.$axios.get('http://localhost:9090/book/findbyauthor?author='+info,
            ).then(
            res=>{
              if(res.data.code=="200"){
                this.$store.commit("updateProps",res.data.data)
              }
            }
        )
      }
      this.$message("返回搜索结果");
      console.log(info)
    },
    exit(){
      this.$confirm('点击"确定"按钮将进行跳转登出，是否跳转?', '登出操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push('/login')
        this.$store.state.user.isLogin=false;
        this.$store.commit("clearCart")
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消登出'
        });
      });
    },
    login(){
      this.$router.push('/login')
    },
    register(){
      this.$router.push('/register')
    },
    mofify(){
      this.$prompt('请输入重置密码', '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(
          ({ value }) => {
            this.$axios.post('http://localhost:9090/user/updatepwd',{uname:this.$store.state.user.username,pwd:value}).
            then(res=>{
              if(res.status==200){
                this.$message({
                      type: 'success',
                      message: '修改成功，你的重置密码是:' + value
                    }
                )
              }else{
                this.$message({
                      type: 'warning',
                      message: "修改失败"+res.msg
                    }
                )
              }

            })
        ;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消重置密码'
        });
      });
    }

}
}
</script>

<style scoped>

</style>
